<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { setBankInfo, setPayPass } from '/@/apis/userApi';
  import { useRequest } from 'vue-request';
  import { NotifySuccess, isNull, NotifyWarn } from '/@/utils';
  import { i18nTranslate } from '/@/i18n';
  import { useUserId } from '/@/hooks';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const { getUserId } = useUserId();
  const bankInfo = ref({
    bankUserName: '',
    bankCard: '',
    bankName: '',
    moneyAddr: '',
    password: '',
  });
  const tabsActive = ref(0);
  const chain = ref('TRC20');
  const OnSubmit = async () => {
    const params = {
      member: getUserId(),
      bankUserName: bankInfo.value.bankUserName,
      bankCard: bankInfo.value.bankCard,
      bankName: bankInfo.value.bankName,
      moneyAddr: bankInfo.value.moneyAddr,
    };
    if (!tabsActive.value) {
      if (isNull(bankInfo.value.bankUserName)) {
        NotifyWarn(i18nTranslate('Pleaseenteryourname'));
        return;
      }
      if (isNull(bankInfo.value.bankName)) {
        NotifyWarn(i18nTranslate('Pleaseenterthebankname'));
        return;
      }
      if (isNull(bankInfo.value.bankCard)) {
        NotifyWarn(i18nTranslate('Pleaseenteryouraccountnumber'));
        return;
      }
    }
    if (isNull(bankInfo.value.moneyAddr) && tabsActive.value) {
      NotifyWarn(i18nTranslate('Pleaseenteryourwalletaddress'));
      return;
    }
    if (isNull(bankInfo.value.password)) {
      NotifyWarn(i18nTranslate('Pleaseenterthewithdrawalpassword'));
      return;
    }
    await requestSetBankInfo.run(params);
  };

  const requestSetBankInfo = useRequest(setBankInfo, {
    manual: true,
    onSuccess() {
      const payParams = {
        member: getUserId(),
        password: bankInfo.value.password,
      };
      requestSetPayPass.run(payParams);
      NotifySuccess(i18nTranslate('Successful'));
      router.go(-1);
    },
  });
  // 切换方式，数据清空
  watch(tabsActive, () => {
    bankInfo.value = { bankUserName: '', bankCard: '', bankName: '', moneyAddr: '', password: '' };
  });
  const requestSetPayPass = useRequest(setPayPass, {
    manual: true,
    onSuccess() {
      NotifySuccess(i18nTranslate('Successful'));
      router.go(-1);
    },
  });
</script>

<template>
  <div class="bank-content">
    <AppBar back :primary="true" :title="$t('AddyourBankAccount')" />
    <div class="bank_tab">
      <van-tabs shrink v-model:active="tabsActive">
        <van-tab :title="$t('Bank')" />
        <van-tab :title="$t('Walletaddress')" />
      </van-tabs>
    </div>
    <div class="add_bank">
      <div v-if="!tabsActive">
        <InputBase
          v-model="bankInfo.bankUserName"
          :label="$t('AccountHoldersName')"
          :placeholder="$t('Pleaseenteryourname')"
        />
        <InputBase
          v-model="bankInfo.bankCard"
          :label="$t('Bankaccountnumber')"
          :placeholder="$t('Pleaseenteryouraccountnumber')"
        />
        <InputBase
          v-model="bankInfo.bankName"
          :label="$t('BankName')"
          :placeholder="$t('Pleaseenterthebankname')"
        />
      </div>
      <div v-else>
        <InputBase disabled label="TRON" v-model="chain" />
        <InputBase
          v-model="bankInfo.moneyAddr"
          :label="$t('Walletaddress')"
          :placeholder="$t('Pleaseenteryourwalletaddress')"
        />
      </div>

      <InputBase
        :label="$t('Withdrawalpassword')"
        v-model="bankInfo.password"
        :maxlength="6"
        :placeholder="$t('Pleaseenterthewithdrawalpassword')"
      />
      <LargePrimaryButton block class="submit_button" @click="OnSubmit">{{
        $t('Submit')
      }}</LargePrimaryButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .bank-content {
    height: 100vh;
    .bank_tab {
      background: #111111;
      padding: 35px 26px;
      width: 100%;
    }

    .add_bank {
      padding: 50px 30px 10px;
    }
    .input_lable {
      font-weight: 500;
      font-size: 40px;
    }
    .input_number {
      margin-top: 20px;
      height: 98px;
      margin-bottom: 40px;
    }
    .submit_button {
      margin-top: 50px;
    }
  }
</style>
<style lang="scss">
  .bank-content {
    .var-app-bar {
      background: #ffffff;
    }
    .van-cell {
      padding: 10px 40px;
      background: #f8f8f8;
      border-radius: 16px;
      height: 98px;
      .van-field__control {
        height: 72px;
      }
    }
    .van-tab__text--ellipsis {
      font-size: 30px;
      font-weight: 500;
      color: #999999;
    }
    .van-tabs__nav {
      width: 100%;
      height: 68px;
      background: #242424;
      margin-bottom: 14px;
      border-radius: 16px;
      padding: 5px;
    }
    .van-tab {
      width: 49%;
    }
    .van-tab--active {
      background: #0063f5;
      border-radius: 16px;
      font-weight: 400;
      .van-tab__text {
        font-size: 30px;
        color: #fff;
      }
    }
    .van-tabs__line {
      display: none;
    }
  }
</style>
